<template>
  <menus-button
    ico="reply"
    :text="t('comment.text')"
    @menu-click="showInsertDialog = true"
  />

  <!-- 添加批注对话框 -->
  <t-dialog
    v-model:visible="showInsertDialog"
    :header="t('comment.insertDialog.title')"
    :width="480"
    :destroy-on-close="true"
    placement="center"
    :attach="container"
  >
    <div class="umo-comment-insert-dialog">
      <div class="form-field">
        <label>{{ t('comment.insertDialog.author') }}</label>
        <t-input
          v-model="insertForm.author"
          :placeholder="t('comment.insertDialog.authorPlaceholder')"
          clearable
        />
      </div>

      <div class="form-field">
        <label>{{ t('comment.insertDialog.content') }}</label>
        <t-textarea
          v-model="insertForm.content"
          :placeholder="t('comment.insertDialog.contentPlaceholder')"
          :autosize="{ minRows: 3, maxRows: 6 }"
        />
      </div>
    </div>

    <template #footer>
      <t-button variant="outline" @click="showInsertDialog = false">
        {{ t('comment.insertDialog.cancel') }}
      </t-button>
      <t-button theme="primary" @click="insertComment">
        {{ t('comment.insertDialog.insert') }}
      </t-button>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
const editor = inject('editor')
const container = inject('container')

// 表单数据
const insertForm = $ref({
  author: '',
  content: '',
})

// 对话框显示状态
let showInsertDialog = $ref(false)

// 插入批注
const insertComment = () => {
  // 验证表单
  if (!insertForm.author.trim()) {
    useMessage('warning', {
      content: t('comment.insertDialog.authorRequired'),
      placement: 'top',
    })
    return
  }

  if (!insertForm.content.trim()) {
    useMessage('warning', {
      content: t('comment.insertDialog.contentRequired'),
      placement: 'top',
    })
    return
  }

  // 插入批注
  editor.value?.commands.insertComment({
    author: insertForm.author.trim(),
    content: insertForm.content.trim(),
  })

  // 重置表单并关闭对话框
  insertForm.author = ''
  insertForm.content = ''
  showInsertDialog = false

  useMessage('success', {
    content: `${t('comment.text')}${t('dialog.insertSuccess', '插入成功')}`,
    placement: 'top',
  })
}

// 重置表单
const resetForm = () => {
  insertForm.author = ''
  insertForm.content = ''
}

// 监听对话框关闭
watch(
  () => showInsertDialog,
  (visible) => {
    if (!visible) {
      resetForm()
    }
  }
)
</script>

<style lang="less" scoped>
.umo-comment-insert-dialog {
  .form-field {
    margin-bottom: 16px;

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--td-text-color-primary);
    }
  }
}
</style> 